<?php get_header(); ?>

	<div class="main">
	<main role="main" >
		<!-- section -->
		<section>
		<div class="slideshow">
			<div class="slideimg">
				<img src="<?php echo get_template_directory_uri();?>/jewelry/images/slideshow1.png">
			</div>
			<div class="slideimg">
				<img src="<?php echo get_template_directory_uri();?>/jewelry/images/slideshow2.png">
			</div>
			<div class="slideimg">
				<img src="<?php echo get_template_directory_uri();?>/jewelry/images/slideshow3.png">
			</div>
		</div>

		<div class="banner-right">
			<a href="#">
				<img src="<?php echo get_template_directory_uri(); ?>/jewelry/images/banner1.png">
			</a>
			<a href="#">
				<img src="<?php echo get_template_directory_uri(); ?>/jewelry/images/banner2.png">
			</a>
				<a href="#">
				<img src="<?php echo get_template_directory_uri(); ?>/jewelry/images/banner3.png">
			</a>
		</div>
			
		<div class="content">
		<div class="content1">
			<div class="content1-h3">
				<h3>Sản phẩm nổi bật</h3>
			</div>
			<div class="content1-info">
				<h1>Category 1</h1>
				<div class="products">
					<?php 
					$args = array(  
					    'post_type' => 'product',  
					    'meta_key' => '_featured',  
					    'meta_value' => 'yes',  
					    'posts_per_page' => 9  
					);  
					  
					$featured_query = new WP_Query( $args );  
					$countit=1;      
					if ($featured_query->have_posts()) :   
					    while ($featured_query->have_posts()) :   
					        $featured_query->the_post();  
					        $product = get_product( $featured_query->post->ID );  
					        ?>
							<div class="product" id="product_<?php echo $countit?>" <?php if($countit>3) echo 'style="display:none;"';?> >

								<a href="<?php echo $product->post->guid; ?>" >
						    	 <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<div class="imgproduct"><img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder"/></div>'; ?>
						    	<?php echo '<div class="titleproduct">' . get_the_title() .'</div>'; ?>
						    	<?php					
									echo '<div class="priceproduct">' . $product->price .get_woocommerce_currency_symbol().' </div>';
						    	?>
						    	</a>
						    </div>
						    <?php  
						    $countit++;
					    endwhile;  
					endif;  
					wp_reset_query(); // Remember to reset 
					?>
				</div>
				<div class="controlbutton" id="btnleft1">
					<span class="glyphicon glyphicon-chevron-left"></span>
				</div>
				<div class="controlbutton" style="margin-left:680px;" id="btnright1">
					<span class="glyphicon glyphicon-chevron-right"></span>
				</div>
				<script type="text/javascript">
					var page;
					$("#btnleft1").click(function(){
						if (page==null) page=1;
						page--;
						if (page==0) page=3;
						for (var i = 1; i <10; i++) {
							$("#product_"+i).hide();
						};
						for (var i = 1; i <4; i++) {
							$("#product_"+(i+(page-1)*3)).show();
						};
					});
					$("#btnright1").click(function(){
						if (page==null) page=1;
						page++;
						if (page==4) page=1;
						for (var i = 1; i <10; i++) {
							$("#product_"+i).hide();
						};
						for (var i = 1; i <4; i++) {
							$("#product_"+(i+(page-1)*3)).show();
						};
					});
				</script>
			</div>
		</div>

		<div class="content2">
			<div class="content2-h3">
				<h3>Sản phẩm bán chạy</h3>
			</div>
			<div class="content2-info">
				<h1>Category 2</h1>
			</div>
		</div>
		</div>

		<div class="connectus" >
			<div class="connectus-left">
				<span>Tìm chúng tôi trên:</span>
				<a href="">
					<img src="<?php echo get_template_directory_uri(); ?>/jewelry/images/fa.png">
				</a>
			</div>
		
			<div class="connectus-right">
				<strong>Nhận email về sản phẩm mới với giá tốt nhất!</strong>
				<input type="text" placeholder="Nhập email">
				<button class="btnsignup">Đăng ký</button>
			</div>
		</div>
		</section>
		<!-- /section -->
	</main>
</div>


<div id="divhover" style="display:none; position:absolute; border:solid 1px #e6e6e6; background-color:white; text-align:center; padding:30px;">
				<img id="picshow" style="height:300px; width:300px;"></img>	
			</div>

			<script type="text/javascript">
				$(".product").hover(function(){
					h=$(this).offset();
					$("#divhover").show();
					$("#divhover").html($(this).html());
					$("#divhover").offset({ top: h.top, left: h.left });
				}, function(){

				});
				// $(".wp-post-image").hover(function(){
				// 	h=$(this).offset();
				// 	$("#divhover").show();
				// 	$("#picshow").attr("src",$(this).attr("src"));
				// 	$("#divhover").offset({ top: h.top-50, left: h.left-50 });
				// }, function(){

				// });
				$("#divhover").mouseleave(function(){
					$(this).hide();
				});
			</script>
			
<?php get_footer(); ?>
